import { parse, stringify } from "qs";
import { useMemo } from "react";
import { NavigateOptions, useSearchParams } from "react-router-dom";

const useQuerySearchParams = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const params = useMemo(() => parse(searchParams.toString()), [searchParams]);

  const setParams = (params: any, navigateOpts?: NavigateOptions) => {
    // const options = Object.assign({ replace: true }, navigateOpts);
    if (typeof params === "function") {
      setSearchParams(stringify(params()), navigateOpts);
    } else {
      setSearchParams(stringify(params), navigateOpts);
    }
  };
  return [params, setParams];
};

export default useQuerySearchParams;
